import { useRequest } from 'ahooks'
import {
  Button, Divider, Form, Input, message, Modal, Select,
} from 'antd'
import styled from 'styled-components'
import { FC, useCallback, useMemo, useState } from 'react'
import AppCommonItem from './CommonItem'
import { useEffect } from 'react'
import { getDeakListApi, getDeakListItemApi, postAddDeskApi } from '@/api/shopman'

const cate = require('@/assets/cate.png')
const StyledCategoryContenier = styled.div`
padding: 50px 50px;
display: flex;
flex-direction: column;
.app-category_contenier{
  height: 100%;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  .category-item{
  width: 231px;
  height: 101px;
  margin: 20px;
  background-image: url(${cate});
  background-color: #fff;
  &_add{
    text-align: center;
    line-height: 101px;
    font-size: 20px;
    font-weight: 800;
  }
  }
}
`
interface IOptions {
  value: string,
  label: string,
  id: number
}

const AppCommon: FC = () => {
  const [isModalOpen, setIsModalOpen] = useState(false)
  const [form] = Form.useForm()
  const { data: list, run: getList } = useRequest(getDeakListApi)
  const handleSubmit = useCallback(async () => {
    const values = form.getFieldsValue()
    const { search, categoryName } = values
    const data = await getDeakListItemApi(search)
  }, [form])
  const showModal = () => {
    setIsModalOpen(true);
  }
  const handleOk = useCallback(() => {
    setIsModalOpen(false)
    console.log(111)
    getList()
  }, [])
  // const handleCreate = useCallback(async (e: React.KeyboardEvent) => {
  //   const { value } = e.target
  // const data =  await postAddDeskApi()
  // if(data){
  //   message.success('添加成功')
  // }
  // }, [])
  const handleCancel = useCallback(() => {

    setIsModalOpen(false)
  }, [])
  return (
   <>
     {
      list && <StyledCategoryContenier>
      <h1>菜品类别</h1>
      <Form
        layout="inline"
        form={form}
      >
        <Form.Item label="分类" name="categoryName">
          <Select
            allowClear
            style={{ width: 120 }}
            options={list}
          />
        </Form.Item>
        <Form.Item label="搜索" name="search">
          <Input placeholder="请输入菜名" />
        </Form.Item>
        <Form.Item>
          <Button type="primary" onClick={handleSubmit}>Submit</Button>
        </Form.Item>
      </Form>
      <Divider />
      <div className="app-category_contenier">
      <div className="category-item">
        <div className="category-item_add" onClick={showModal}>
          +
        </div>
        <Modal className="cate-notify" title="新增菜品类别" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
          <Form
            name="basic"
            labelCol={{ span: 8 }}
            wrapperCol={{ span: 16 }}
          >
            <Form.Item
              label="名称"
              name="catename"
              rules={[{ required: true, message: "请输入菜品类名~" }]}
            >
              <Input name="value" onPressEnter={(e) => { handleCreate(e) }}/>
            </Form.Item>
          </Form>
        </Modal>
      </div>

        {
          list.map((item: IOptions) => <AppCommonItem key={item.id}  getList = { getList } label={item.label} value={item.value} id={item.id}/>)
        }
      </div>
    </StyledCategoryContenier>
     }
   </>
  )
}

export default AppCommon

